<template>
  <div>
    <!-- 头部的件数统计 -->
    <Card>
      <div class="top top-self">
        <div class="col-33 bd-r">
          <div class="info">本月复效</div>
          <div class="infoNum">{{ revalid }}个</div>
        </div>
        <div class="col-33 bd-r">
          <div class="info">本月终止</div>
          <div class="infoNum">{{ end }}个</div>
        </div>
        <div class="col-33 bd-r">
          <div class="info">本月失效</div>
          <div class="infoNum">{{ invalid }}个</div>
        </div>
      </div>
      <div class="clearBoth"></div>
    </Card>
    <!-- 表单信息填写 -->
    <Card style="margin-bottom:20px;margin-top:20px;">
      <Form :model="superviseForm" ref="superviseForm" :rules="rules" style="display: block;">
        <Row gutter="40">
          <i-col span="6">
            <FormItem>
              <Select v-model="superviseForm.workStatus" placeholder="工作状态" clearable>
                <Option v-for="item in workStatusList" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <DatePicker v-model="superviseForm.workPlanRange" type="daterange" placeholder="工作计划时间段" :editable="false"
                style="width:100%" @on-change="changeWorkPlanRange"></DatePicker>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <DatePicker v-model="superviseForm.workEndRange" type="daterange" placeholder="工作完成时间段" :editable="false"
                style="width:100%" @on-change="changeWorkEndRange"></DatePicker>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <DatePicker v-model="superviseForm.PayableRange" type="daterange" placeholder="应交日时间段" :editable="false"
                style="width:100%" @on-change="changePayableRange"></DatePicker>
            </FormItem>
          </i-col>
        </Row>
        <Row gutter="40">
          <i-col span="6">
            <FormItem>
              <Select v-model="superviseForm.saleChannel" @on-change="changeSaleChannel" placeholder="销售渠道" clearable>
                <Option v-for="item in saleChannelList" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Select v-model="superviseForm.selltype" :disabled="!superviseForm.saleChannel" placeholder="子渠道" clearable>
                <Option v-for="item in subnameList" :key="item.value" :value="item.value">{{ item.value }}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Input placeholder="投保人姓名" v-model="superviseForm.appntName" />
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Input placeholder="保单号" v-model="superviseForm.applyNo" />
            </FormItem>
          </i-col>
        </Row>
        <Row gutter="40">
          <i-col span="6">
            <FormItem>
              <Select v-model="superviseForm.applyStatus" placeholder="保单状态" clearable>
                <Option v-for="item in applyStatusList" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <DatePicker v-model="superviseForm.disableRange" type="daterange" placeholder="失效日时间段" :editable="false"
                style="width:100%" @on-change="changeDisableRange"></DatePicker>
            </FormItem>
          </i-col>
          <i-col span="6">
            <Row>
              <i-col span="11">
                <FormItem prop="minFee">
                  <Input placeholder="最低应收保费" v-model="superviseForm.minFee" type="number"
                    @on-blur="decimalConversion(superviseForm.minFee)" />
                </FormItem>
              </i-col>
              <i-col span="2" style="text-align:center;line-height:30px">-</i-col>
              <i-col span="11">
                <FormItem prop="maxFee">
                  <Input placeholder="最高应收保费" v-model="superviseForm.maxFee" type="number"
                    @on-blur="decimalConversion2(superviseForm.maxFee)" />
                </FormItem>
              </i-col>
            </Row>
          </i-col>
          <i-col span="6">
            <Row>
              <i-col span="11">
                <FormItem>
                  <Input placeholder="已交次数" v-model="superviseForm.payCount" />
                </FormItem>
              </i-col>
              <i-col span="2" style="text-align:center;line-height:30px">-</i-col>
              <i-col span="11">
                <FormItem>
                  <Select v-model="superviseForm.pay" clearable>
                    <!-- payList -->
                    <Option v-for="item in payWayList" :key="item.key" :value="item.key">{{ item.value }}</Option>
                  </Select>
                </FormItem>
              </i-col>
            </Row>
          </i-col>
        </Row>
        <Row gutter="40">
          <i-col span="6">
            <FormItem>
              <DatePicker v-model="superviseForm.shouldPayRange" type="daterange" placeholder="工作录入时间段" :editable="false"
                style="width:100%" @on-change="changeShouldPayRange"></DatePicker>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Cascader change-on-select :data="reagentOrganizationList" v-model="superviseForm.reagentOrganization"
                @on-change="organizationChange" placeholder="续期专员机构" clearable></Cascader>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Select v-model="superviseForm.reagentName" placeholder="续期专员姓名" clearable multiple>
                <Option v-for="item in reagentNameList" :key="item.key" :value="item.key">{{ item.value }}-{{ item.key }}
                </Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Select v-model="superviseForm.estimatestate" placeholder="收费预估" clearable>
                <Option v-for="item in estimatestateList" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </FormItem>
          </i-col>
        </Row>
        <Row gutter="40">
          <i-col span="6">
            <FormItem>
              <Select v-model="superviseForm.faceflag" placeholder="是否面访" clearable>
                <Option value="0">是</Option>
                <Option value="1">否</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Select v-model="superviseForm.callresult" placeholder="是否外呼成功" clearable>
                <Option value="0">是</Option>
                <Option value="1">否</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Select v-model="superviseForm.evaluateflag" placeholder="是否上传评鉴表" clearable>
                <Option value="Y">是</Option>
                <Option value="N">否</Option>
              </Select>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <Button type="primary" @click="handleSubmit()" style="margin-right:20px" :loading="queryLoading">查询</Button>
          <Button @click="handleReset()">重置</Button>
        </Row>
      </Form>
    </Card>
    <!-- 表格信息 -->
    <Card>
      <div style="display:flex;justify-content:space-between">
        <div class="content">
          <Button :type="but[0]" @click="clickButton(0)">全部</Button>
          <Button :type="but[1]" @click="clickButton(1)">本月复效</Button>
          <Button :type="but[2]" @click="clickButton(2)">本月终止</Button>
          <Button :type="but[3]" @click="clickButton(3)">本月失效</Button>
        </div>
        <div>
          <Button type="primary" icon="md-download" @click="downLoad">导出数据</Button>
        </div>
      </div>
      <Table :columns="chargeColumns" :data="chargeData" @on-selection-change="selectionChange"
        @on-sort-change="sortChange" :row-class-name="rowClassName">
        <template slot-scope="{row}" slot="planstatename">
          <span v-if="row.planstatename == '未服务'">
            <Button style="border-radius: 16px;background-color:rgb(255,141,26);color:#fff" size="small"
              @click="forward(row)">{{ row.planstatename }}</Button>
          </span>
          <span v-if="row.planstatename == '服务中'">
            <Button style="border-radius: 16px;background-color:rgb(24,144,255);color:#fff" size="small"
              @click="forward(row)">{{ row.planstatename }}</Button>
          </span>
          <span v-if="row.planstatename == '已完成'">
            <Button style="border-radius: 16px;background-color:rgb(67,207,124);color:#fff" size="small"
              @click="forward(row)">{{ row.planstatename }}</Button>
          </span>
        </template>
        <template slot-scope="{row}" slot="contstatename">
          <span v-if="row.contstatename == '失效中'" style="color: rgba(255, 141, 26, 1);">
            <span class="circle" style="background-color: rgba(255, 141, 26, 1);margin-right:5px"></span>
            {{ row.contstatename }}
          </span>
          <span v-if="row.contstatename == '终止'" style="color: rgba(166, 166, 166, 1);">
            <span class="circle" style="background-color: rgba(166, 166, 166, 1);margin-right:5px"></span>
            {{ row.contstatename }}
          </span>
          <span v-if="row.contstatename == '已复效'" style="color: rgba(67, 207, 124, 1);">
            <span class="circle" style="background-color: rgba(67, 207, 124, 1);margin-right:5px"></span>
            {{ row.contstatename }}
          </span>
        </template>
      </Table>
      <Page :total="total" show-sizer show-total style="text-align:right;margin-top:20px" @on-change="pageChange"
        @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeOptions" :current="pageIndex" :page-size="pageSize"
        transfer></Page>
    </Card>
    <div class="contain" ref="mybox">
      <canvas id="myCanvas" width="200" height="100" ref="myCanvas" style="position: absolute;"></canvas>
    </div>
  </div>
</template>

<script>
import util from "../../../util/util";
import { exportFile } from "../../../util/util";
import { drawSign } from '../../../util/drawSign';
export default {
  props: {
    payWayList: {
      type: Array
    }
  },
  data() {
    const validatePremium = (rule, value, callback) => {
      if (value) {
        let reg = /^[0-9][0-9]*$/;
        let reg1 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{1})$/;
        let reg2 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{2})$/;
        if (reg.test(value)) {
          callback();
        } else if (reg1.test(value)) {
          callback();
        } else if (reg2.test(value)) {
          callback();
        } else {
          callback(new Error("请输入两位小数"));
        }
      } else {
        callback();
      }
      callback();
    };
    return {
      estimatestateList: [
        { key: "0", value: "可回收" },
        { key: "1", value: "收费困难" },
        { key: "2", value: "不可回收" },
        { key: "3", value: "不确定" }
      ],
      superviseForm: {
        faceflag: "",//是否面访20200918 wy
        estimatestate: "",//收费预估20200918 wy
        workStatus: "",
        workPlanRange: ["", ""],
        workEndRange: ["", ""],
        PayableRange: ["", ""],
        saleChannel: "",
        selltype: "",
        callresult: "",
        evaluateflag: "",
        appntName: "",
        applyNo: "",
        payCount: "",
        pay: "",
        applyStatus: "",
        minFee: "",
        maxFee: "",
        disableRange: ["", ""],
        reagentOrganization: "",
        reagentName: [],
        shouldPayRange: ["", ""]
      },
      rules: {
        minFee: [{ validator: validatePremium, trigger: "blur" }],
        maxFee: [{ validator: validatePremium, trigger: "blur" }]
      },
      //本月交费完成
      monthPaid: "0",
      end: 0,
      invalid: 0,
      revalid: 0,
      //工作状态下拉框
      workStatusList: [],
      //销售渠道下拉框
      saleChannelList: [],
      // 子渠道下拉框
      subnameList: [],
      // 续期专员机构
      reagentOrganizationList: [],
      // 续期专员姓名
      reagentNameList: [],
      //年交
      payList: [],
      //表格
      chargeColumns: [
        // {
        //   type: "selection",
        //   align: "center",
        //   fixed: "left",
        //   width: 60
        // },
        {
          title: "计划编号",
          key: "planid",
          width: "190",
          fixed: "left"
        },
        {
          title: "保单号",
          key: "contno",
          width: "190",
          fixed: "left"
        },
        {
          title: "保单标志",
          key: "plantypename",
          width: "100",
          align: "center"
        },
        {
          title: "投保人",
          key: "appntname",
          align: "center",
          width: "100"
        },
        {
          title: "应交日",
          key: "paytodate",
          align: "center",
          width: "120",
          sortable: true,
          sortable: "custom"
        },
        {
          title: "已交次数",
          key: "payCount",
          align: "center",
          width: "100"
        },
        {
          title: "应收保费(元)",
          key: "sumprem",
          align: "center",
          width: "140",
          sortable: true,
          sortable: "custom"
        },
        {
          title: "失效日",
          key: "invaliddate",
          align: "center",
          width: "150"
        },
        {
          title: "保单状态",
          key: "contstatename",
          align: "center",
          width: "150",
          slot: "contstatename"
        },
        {
          title: "计划工作时间",
          key: "appointeddate",
          align: "center",
          width: "150"
        },
        {
          title: "工作完成时间",
          key: "fishdate",
          align: "center",
          minWidth: 160
        },
        {
          title: "续期专员",
          key: "reagent",
          align: "center",
          width: "150",
          fixed: "right"
        },
        {
          title: "工作状态",
          key: "planstatename",
          align: "center",
          width: "120",
          slot: "planstatename",
          fixed: "right",
          sortable: "custom"
        },
        {
          title: "是否呼出成功",
          key: "visitresult",
          align: "center",
          width: "120"
        },
        {
          title: "渠道",
          key: "salechnl",
          align: "center",
          width: "120"
        },
        {
          title: "子渠道",
          key: "selltype",
          align: "center",
          width: "120"
        },
        {
          title: "原因",
          key: "reason",
          align: "center",
          width: "120"
        },
      ],
      chargeData: [],
      but: ["primary", "default", "default", "default", "default"],
      workTypeList: [],
      applyStatusList: [],
      selection: [],
      selectLength: "0",
      total: "0",
      pageSizeOptions: [5, 10, 15, 20],
      pageIndex: 1,
      pageSize: 10,
      queryLoading: false,
      premorder: 0,
      paytodateorder: 0,
      planstatenameorder: 0,//工作状态排序
      historyObj: null,
      flagIndex: 0
    };
  },
  methods: {
    // 导出数据
    downLoad() {
      let obj = {
        planstate: this.superviseForm.workStatus ? this.superviseForm.workStatus : null,
        rangeminappointeddate: this.superviseForm.workPlanRange[0] ? this.timeFormat(this.superviseForm.workPlanRange[0]) : null,
        rangemaxappointeddate: this.superviseForm.workPlanRange[1] ? this.timeFormat(this.superviseForm.workPlanRange[1]) : null,
        rangeminfishdate: this.superviseForm.workEndRange[0] ? this.timeFormat(this.superviseForm.workEndRange[0]) : null,
        rangemaxfishdate: this.superviseForm.workEndRange[1] ? this.timeFormat(this.superviseForm.workEndRange[1]) : null,
        rangeminpaytodate: this.superviseForm.PayableRange[0] ? this.timeFormat(this.superviseForm.PayableRange[0]) : null,
        rangemaxpaytodate: this.superviseForm.PayableRange[1] ? this.timeFormat(this.superviseForm.PayableRange[1]) : null,
        rangmininvaliddate: this.superviseForm.disableRange[0] ? this.timeFormat(this.superviseForm.disableRange[0]) : null,
        rangmaxinvaliddate: this.superviseForm.disableRange[1] ? this.timeFormat(this.superviseForm.disableRange[1]) : null,
        rangeminControllerDate: this.superviseForm.shouldPayRange[0] ? this.timeFormat(this.superviseForm.shouldPayRange[0]) : null,
        rangemaxControllerDate: this.superviseForm.shouldPayRange[1] ? this.timeFormat(this.superviseForm.shouldPayRange[1]) : null,
        branchtype: this.superviseForm.saleChannel ? this.superviseForm.saleChannel : null,
        appntname: this.superviseForm.appntName ? this.superviseForm.appntName : null,
        contno: this.superviseForm.applyNo ? this.superviseForm.applyNo : null,
        payyear: this.superviseForm.payCount ? this.superviseForm.payCount : null,
        payintv: this.superviseForm.pay ? this.superviseForm.pay : null,
        rangeminprem: this.superviseForm.minFee ? this.superviseForm.minFee : null,
        rangemaxprem: this.superviseForm.maxFee ? this.superviseForm.maxFee : null,
        reagentcode: this.superviseForm.reagentOrganization ? this.superviseForm.reagentOrganization[this.superviseForm.reagentOrganization.length - 1] : null,
        reagentList: this.superviseForm.reagentName.length > 0 ? this.superviseForm.reagentName : [],
        contstate: this.superviseForm.applyStatus ? this.superviseForm.applyStatus : null,
        estimatestate: this.superviseForm.estimatestate ? this.superviseForm.estimatestate : null,//收费预估20200918 wy
        faceflag: this.superviseForm.faceflag ? this.superviseForm.faceflag : null,//是否面访20200918 wy
        callresult: this.superviseForm.callresult ? this.superviseForm.callresult : null,
        evaluateflag: this.superviseForm.evaluateflag ? this.superviseForm.evaluateflag : null,
        selltype: this.superviseForm.selltype ? this.superviseForm.selltype : null,
        index: this.pageIndex,
        pageSize: this.pageSize,
        selecttag: String(this.flagIndex),
        premorder: String(this.premorder),
        paytodateorder: String(this.paytodateorder),
        // planstatenameorder: this.planstatenameorder,//工作状态排序20200918 wy
      };
      exportFile("/scrm-gateway/scrm-uer/api/workDownload/invalidDownload", obj);
    },
    // 获取子渠道
    changeSaleChannel(value) {
      $.ajax("scrm-gateway/scrm-uer/api/plan/selectsubchannel/" + value, {
        method: "get",
        contentType: "application/json;charset=utf-8",
        headers: {
          Authorization: sessionStorage.getItem("credentials")
        },
        success: res => {
          if (res.code == 200 && res.data != null) {
            let obj = {}
            res.data = res.data.reduce((cur, next) => {
              obj[next.value] ? "" : obj[next.value] = true && cur.push(next);
              return cur;
            }, [])
            this.subnameList = res.data
          } else {
            this.subnameList = [];
          }
        },
        error: res => {
          this.$Message.error(res.msg);
        }
      });
    },
    //转时间
    timeFormat(time) {
      if (!time) {
        return ''
      }
      let d = new Date(time)
      var y = d.getFullYear();
      var m = d.getMonth() + 1;
      if (m < 10) {
        m = "0" + m;
      }
      var day = d.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      return y + "-" + m + "-" + day;
    },
    //行样式
    rowClassName(row, index) {
      if (row.facerecordflag == '0' && row.planstatename != '已完成') {
        return 'table-row-red1';
      } else if (row.visitflag == '0' && row.planstatename != '已完成') {
        return 'table-row-orange1';
      }
      return '';
    },

    // 应交日时间段
    changePayableRange(date) {
      // console.log(date)
      this.superviseForm.PayableRange = date;
    },

    // 工作计划时间段
    changeWorkPlanRange(date) {
      // console.log(date)
      this.superviseForm.workPlanRange = date;
    },

    // 工作完成时间段
    changeWorkEndRange(date) {
      // console.log(date)
      this.superviseForm.workEndRange = date;
    },

    // 工作录入时间段
    changeShouldPayRange(date) {
      // console.log(date)
      this.superviseForm.shouldPayRange = date;
    },

    // 失效日时间段
    changeDisableRange(date) {
      // console.log(date)
      this.superviseForm.disableRange = date;
    },

    // 工作统计下拉框信息
    initial() {
      this.api.selectWorkplanInvalid().then(res => {
        res.data = {
          "revalid": 1,
          "invalid": 2,
          "end": 6
        }
        if (res.code == 200 && res.data != null) {
          this.end = res.data.end;
          this.invalid = res.data.invalid;
          this.revalid = res.data.revalid;
        }
      });
      this.api.professionalList().then(res => {
        if (res.code == 200 && res.data != null) {
          if (res.data.planListVOS) {
            this.workStatusList = res.data.planListVOS;
          }
          if (res.data.salechnlListVOS) {
            this.saleChannelList = res.data.salechnlListVOS;
          }
          // if (res.data.listKeyValueVOS) {
          //   this.reagentOrganizationList = res.data.listKeyValueVOS;
          // }
          if (res.data.payintvVOS) {
            this.payList = res.data.payintvVOS;
          }
          if (res.data.contstateListVOS) {
            this.applyStatusList = res.data.contstateListVOS;
          }
        } else {
          // this.reagentorganizationList = [];
          this.saleChannelList = [];
          this.workStatusList = [];
          this.payList = [];
          this.applyStatusList = [];
        }
      });
    },

    //表单---保单金额排序asc
    sortChange(column, key, order) {
      if (column.key == "paytodate") {
        this.premorder = 0;
        this.planstatenameorder = 0;
        // 应交日
        if (column.order == "asc") {
          // 升序
          this.paytodateorder = 1;
        } else if (column.order == "desc") {
          // 降序
          this.paytodateorder = 2;
        } else {
          // 默认
          this.paytodateorder = 0;
        }
      }
      if (column.key == "sumprem") {
        this.paytodateorder = 0;
        this.planstatenameorder = 0;
        // 应收保费
        if (column.order == "asc") {
          // 升序
          this.premorder = 1;
        } else if (column.order == "desc") {
          // 降序
          this.premorder = 2;
        } else {
          // 默认
          this.premorder = 0;
        }
      }
      //工作状态排序
      if (column.key == "planstatename") {
        this.paytodateorder = 0;
        this.premorder = 0;
        // 应收保费
        if (column.order == "asc") {
          // 升序
          this.planstatenameorder = 1;
          this.premorder = 4;

        } else if (column.order == "desc") {
          // 降序
          this.planstatenameorder = 2;
          this.premorder = 3;
        } else {
          // 默认
          this.planstatenameorder = 0;
        }
      }
      this.handleSubmit(999);
      // console.log(column, key, order);
    },

    // 重置
    handleReset() {
      this.$refs.superviseForm.resetFields();
      this.superviseForm = {
        workStatus: "",
        workPlanRange: ["", ""],
        workEndRange: ["", ""],
        PayableRange: ["", ""],
        saleChannel: "",
        selltype: "",
        callresult: "",
        evaluateflag: "",
        appntName: "",
        applyNo: "",
        payCount: "",
        pay: "",
        applyStatus: "",
        minFee: "",
        maxFee: "",
        disableRange: ["", ""],
        reagentOrganization: "",
        reagentName: [],
        shouldPayRange: ["", ""]
      };
    },

    // 根据管理机构查询续期专员
    organizationChange(value) {
      if (!value) {
        this.reagentNameList = [];
      } else {
        $.ajax("scrm-gateway/scrm-uer/api/List/sekectreangencode/" + value[value.length - 1], {
          method: "get",
          contentType: "application/json;charset=utf-8",
          headers: {
            Authorization: sessionStorage.getItem("credentials")
          },
          success: res => {
            if (res.code == 200 && res.data != null) {
              this.reagentNameList = res.data;
            } else {
              this.reagentNameList = [];
            }
          },
          error: res => {
            this.$Message.error(res.msg);
          }
        });
      }
    },

    //点击按钮变绿，其他default
    clickButton(index) {
      let arr = ["default", "default", "default", "default", "default"];
      arr[index] = "primary";
      this.but = arr;
      if (index == 1) {
        index = 6;
      } else if (index == 2) {
        index = 7;
      } else if (index == 3) {
        index = 8;
      }
      this.flagIndex = index;
      this.handleSubmit(999);
    },

    // 表格选中
    selectionChange(selection) {
      this.selection = selection;
      this.selectLength = selection.length;
    },

    // 分页设置
    pageChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.pageSubmit();
    },
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageSubmit();
    },

    forward(row) {
      // console.log(row);
      this.pageObj.rangeminappointeddate = this.timeFormat(this.pageObj.rangeminappointeddate)
      this.pageObj.rangemaxappointeddate = this.timeFormat(this.pageObj.rangemaxappointeddate)
      this.pageObj.rangeminfishdate = this.timeFormat(this.pageObj.rangeminfishdate)
      this.pageObj.rangemaxfishdate = this.timeFormat(this.pageObj.rangemaxfishdate)
      this.pageObj.rangeminpaytodate = this.timeFormat(this.pageObj.rangeminpaytodate)
      this.pageObj.rangemaxpaytodate = this.timeFormat(this.pageObj.rangemaxpaytodate)
      this.pageObj.rangeminControllerDate = this.timeFormat(this.pageObj.rangeminControllerDate)
      this.pageObj.rangemaxControllerDate = this.timeFormat(this.pageObj.rangemaxControllerDate)
      this.pageObj.rangmininvaliddate = this.timeFormat(this.pageObj.rangmininvaliddate)
      this.pageObj.rangmaxinvaliddate = this.timeFormat(this.pageObj.rangmaxinvaliddate)

      sessionStorage.setItem("QUERYOBJ", JSON.stringify(this.pageObj));
      sessionStorage.setItem("QUERYFORM", JSON.stringify(this.superviseForm));
      sessionStorage.setItem("INSURANCE_TYPE2", "已失效");
      this.$router.push({
        // name: "serviceDetail",
        path: "serviceDetail",
        query: {
          row: row,
          insuranceType: "disabled"
        }
      });
    },

    // 提交表单
    handleSubmit(index, params) {
      this.$refs.superviseForm.validate(valid => {
        if (valid) {
          // if (util.formNullValidate(this.superviseForm)) {
          //   this.$Message.info("至少选择一个条件");
          //   return false;
          // }
          if (this.historyObj == null) {
            if (index >= 0) {
            } else {
              let arr = ["default", "default", "default", "default"];
              arr[0] = "primary";
              this.but = arr;
              this.queryLoading = true;
              this.pageIndex = 1;
            }
            // this.pageIndex = 1;
            // this.pageSize = 10;
          }
          let obj = {
            planstate: this.superviseForm.workStatus
              ? this.superviseForm.workStatus
              : null,
            rangeminappointeddate: this.superviseForm.workPlanRange[0] ? this.timeFormat(this.superviseForm.workPlanRange[0]) : null,
            rangemaxappointeddate: this.superviseForm.workPlanRange[1] ? this.timeFormat(this.superviseForm.workPlanRange[1]) : null,
            rangeminfishdate: this.superviseForm.workEndRange[0] ? this.timeFormat(this.superviseForm.workEndRange[0]) : null,
            rangemaxfishdate: this.superviseForm.workEndRange[1] ? this.timeFormat(this.superviseForm.workEndRange[1]) : null,
            rangeminpaytodate: this.superviseForm.PayableRange[0] ? this.timeFormat(this.superviseForm.PayableRange[0]) : null,
            rangemaxpaytodate: this.superviseForm.PayableRange[1] ? this.timeFormat(this.superviseForm.PayableRange[1]) : null,
            rangmininvaliddate: this.superviseForm.disableRange[0] ? this.timeFormat(this.superviseForm.disableRange[0]) : null,
            rangmaxinvaliddate: this.superviseForm.disableRange[1] ? this.timeFormat(this.superviseForm.disableRange[1]) : null,
            rangeminControllerDate: this.superviseForm.shouldPayRange[0] ? this.timeFormat(this.superviseForm.shouldPayRange[0]) : null,
            rangemaxControllerDate: this.superviseForm.shouldPayRange[1] ? this.timeFormat(this.superviseForm.shouldPayRange[1]) : null,
            branchtype: this.superviseForm.saleChannel
              ? this.superviseForm.saleChannel
              : null,
            appntname: this.superviseForm.appntName
              ? this.superviseForm.appntName
              : null,
            contno: this.superviseForm.applyNo
              ? this.superviseForm.applyNo
              : null,
            paycount: this.superviseForm.payCount
              ? this.superviseForm.payCount
              : null,
            payintv: this.superviseForm.pay ? this.superviseForm.pay : null,
            rangeminprem: this.superviseForm.minFee
              ? this.superviseForm.minFee
              : null,
            rangemaxprem: this.superviseForm.maxFee
              ? this.superviseForm.maxFee
              : null,
            reagentcode: this.superviseForm.reagentOrganization
              ? this.superviseForm.reagentOrganization[this.superviseForm.reagentOrganization.length - 1]
              : null,
            reagentList:
              this.superviseForm.reagentName.length > 0
                ? this.superviseForm.reagentName + ""
                : null,
            contstate: this.superviseForm.applyStatus
              ? this.superviseForm.applyStatus
              : null,
            estimatestate: this.superviseForm.estimatestate ? this.superviseForm.estimatestate : null,//收费预估20200918 wy
            faceflag: this.superviseForm.faceflag ? this.superviseForm.faceflag : null,//是否面访20200918 wy
            callresult: this.superviseForm.callresult ? this.superviseForm.callresult : null,
            evaluateflag: this.superviseForm.evaluateflag ? this.superviseForm.evaluateflag : null,
            selltype: this.superviseForm.selltype ? this.superviseForm.selltype : null,
            index: this.pageIndex,
            pageSize: this.pageSize,
            selecttag: this.flagIndex,
            premorder: this.premorder,
            paytodateorder: this.paytodateorder,
            // planstatenameorder: this.planstatenameorder,//工作状态排序20200918 wy
          };
          // console.log(obj);
          this.pageObj = obj;
          // this.api.selectWorkStatisticsInvalid(obj).then(res => {
          let res = { code: 200, data: {} }
          res.data = {
            "records": [
              {
                "result": null,
                "salechnl": "个险",
                "selltype": "直销业务",
                "visitresult": null,
                "feewill": null,
                "failresult": null,
                "reason": null,
                "planid": "1235813536609058818",
                "agentcode": "62000725",
                "contno": "0000857616741888",
                "plantypename": "在职单",
                "appntname": "张MX",
                "paytodate": "2022-12-06 00:00:00",
                "payintvname": "年交",
                "payyear": 5,
                "payyears": 5,
                "sumprem": null,
                "appointeddate": null,
                "reagentcode": "860100003",
                "reagentname": "奚续收",
                "invaliddate": null,
                "planstatename": "已完成",
                "fishdate": "2020-03-12 00:00:00",
                "contstatename": "失效中",
                "isassaginment": "2",
                "visitflag": "0",
                "facerecordflag": "0"
              },
              {
                "result": null,
                "salechnl": "个险",
                "selltype": "移动展业",
                "visitresult": null,
                "feewill": null,
                "failresult": null,
                "reason": null,
                "planid": "1235813536579698690",
                "agentcode": "62000725",
                "contno": "0003327819471888",
                "plantypename": "在职单",
                "appntname": "梁MY",
                "paytodate": "2022-12-06 00:00:00",
                "payintvname": "年交",
                "payyear": 2,
                "payyears": 20,
                "sumprem": null,
                "appointeddate": null,
                "reagentcode": "860100003",
                "reagentname": "奚续收",
                "invaliddate": null,
                "planstatename": "已完成",
                "fishdate": "2020-03-11 00:00:00",
                "contstatename": "失效中",
                "isassaginment": "2",
                "visitflag": "0",
                "facerecordflag": "0"
              },
              {
                "result": null,
                "salechnl": "个险",
                "selltype": "移动展业",
                "visitresult": null,
                "feewill": null,
                "failresult": null,
                "reason": null,
                "planid": "1235813536609058820",
                "agentcode": "62000725",
                "contno": "0003329119611888",
                "plantypename": "在职单",
                "appntname": "柳O6",
                "paytodate": "2022-12-06 00:00:00",
                "payintvname": "年交",
                "payyear": 2,
                "payyears": 10,
                "sumprem": null,
                "appointeddate": null,
                "reagentcode": "860100003",
                "reagentname": "奚续收",
                "invaliddate": null,
                "planstatename": "已完成",
                "fishdate": "2020-03-10 00:00:00",
                "contstatename": "失效中",
                "isassaginment": "2",
                "visitflag": "0",
                "facerecordflag": "0"
              },
              {
                "result": null,
                "salechnl": "个险",
                "selltype": "移动展业",
                "visitresult": null,
                "feewill": null,
                "failresult": null,
                "reason": null,
                "planid": "1235813536546144257",
                "agentcode": "62000725",
                "contno": "0003373019041888",
                "plantypename": "在职单",
                "appntname": "付3L",
                "paytodate": "2022-12-06 00:00:00",
                "payintvname": "年交",
                "payyear": 2,
                "payyears": 5,
                "sumprem": null,
                "appointeddate": null,
                "reagentcode": "860100003",
                "reagentname": "奚续收",
                "invaliddate": null,
                "planstatename": "已完成",
                "fishdate": "2020-03-09 00:00:00",
                "contstatename": "失效中",
                "isassaginment": "2",
                "visitflag": "1",
                "facerecordflag": "0"
              },
              {
                "result": null,
                "salechnl": "个险",
                "selltype": "移动展业",
                "visitresult": null,
                "feewill": null,
                "failresult": null,
                "reason": null,
                "planid": "1235813536877494273",
                "agentcode": "62000709",
                "contno": "0003391319221888",
                "plantypename": "在职单",
                "appntname": "孙05",
                "paytodate": "2022-12-06 00:00:00",
                "payintvname": "年交",
                "payyear": 2,
                "payyears": 10,
                "sumprem": null,
                "appointeddate": null,
                "reagentcode": "860100003",
                "reagentname": "奚续收",
                "invaliddate": null,
                "planstatename": "已完成",
                "fishdate": "2020-03-18 00:00:00",
                "contstatename": "失效中",
                "isassaginment": "2",
                "visitflag": "1",
                "facerecordflag": "0"
              },
              {
                "result": null,
                "salechnl": "个险",
                "selltype": "直销业务",
                "visitresult": null,
                "feewill": null,
                "failresult": null,
                "reason": null,
                "planid": "1235813536646807553",
                "agentcode": "62000725",
                "contno": "0000958317571888",
                "plantypename": "在职单",
                "appntname": "张HM",
                "paytodate": "2022-12-06 00:00:00",
                "payintvname": "年交",
                "payyear": 4,
                "payyears": 10,
                "sumprem": null,
                "appointeddate": null,
                "reagentcode": "860100003",
                "reagentname": "奚续收",
                "invaliddate": null,
                "planstatename": "已完成",
                "fishdate": "2020-03-25 00:00:00",
                "contstatename": "失效中",
                "isassaginment": "2",
                "visitflag": "1",
                "facerecordflag": "0"
              },
              {
                "result": null,
                "salechnl": "个险",
                "selltype": "移动展业",
                "visitresult": null,
                "feewill": null,
                "failresult": null,
                "reason": null,
                "planid": "1235813536915243009",
                "agentcode": "62001411",
                "contno": "0003407719271888",
                "plantypename": "在职单",
                "appntname": "杜KY",
                "paytodate": "2022-12-06 00:00:00",
                "payintvname": "年交",
                "payyear": 2,
                "payyears": 10,
                "sumprem": null,
                "appointeddate": null,
                "reagentcode": "860100003",
                "reagentname": "奚续收",
                "invaliddate": null,
                "planstatename": "已完成",
                "fishdate": "2020-03-31 00:00:00",
                "contstatename": "失效中",
                "isassaginment": "2",
                "visitflag": "1",
                "facerecordflag": "0"
              },
              {
                "result": null,
                "salechnl": "个险",
                "selltype": "移动展业",
                "visitresult": null,
                "feewill": null,
                "failresult": null,
                "reason": null,
                "planid": "1233655882457522177",
                "agentcode": "62001190",
                "contno": "0002008217371888",
                "plantypename": "在职单",
                "appntname": "郭V2",
                "paytodate": "2022-12-06 00:00:00",
                "payintvname": "年交",
                "payyear": 2,
                "payyears": 20,
                "sumprem": null,
                "appointeddate": "2021-02-01 00:00:00",
                "reagentcode": "860100003",
                "reagentname": "奚续收",
                "invaliddate": "2020-01-30 00:00:00",
                "planstatename": "服务中",
                "fishdate": "2022-05-25 00:00:00",
                "contstatename": "失效中",
                "isassaginment": "2",
                "visitflag": "1",
                "facerecordflag": "0"
              },
              {
                "result": null,
                "salechnl": "网销",
                "selltype": "i云保",
                "visitresult": null,
                "feewill": null,
                "failresult": null,
                "reason": null,
                "planid": "1471714522301566978",
                "agentcode": "860100009",
                "contno": "0000535020121998",
                "plantypename": "孤儿单",
                "appntname": "享一投",
                "paytodate": "2021-12-20 00:00:00",
                "payintvname": "年交",
                "payyear": 0,
                "payyears": 10,
                "sumprem": 10000,
                "appointeddate": null,
                "reagentcode": "860100026",
                "reagentname": "U享续期CC零一组一号",
                "invaliddate": "2022-02-19 00:00:00",
                "planstatename": "已完成",
                "fishdate": "2022-12-06 00:00:00",
                "contstatename": "失效中",
                "isassaginment": "2",
                "visitflag": "0",
                "facerecordflag": "1"
              },
              {
                "result": null,
                "salechnl": "网销",
                "selltype": "i云保",
                "visitresult": null,
                "feewill": null,
                "failresult": null,
                "reason": null,
                "planid": "1475348607766999042",
                "agentcode": "860100009",
                "contno": "0000541121881998",
                "plantypename": "孤儿单",
                "appntname": "享二十一投",
                "paytodate": "2022-12-15 00:00:00",
                "payintvname": "年交",
                "payyear": 1,
                "payyears": 10,
                "sumprem": null,
                "appointeddate": "2021-12-27 00:00:00",
                "reagentcode": "860100026",
                "reagentname": "U享续期CC零一组一号",
                "invaliddate": "2023-02-06 00:00:00",
                "planstatename": "未服务",
                "fishdate": null,
                "contstatename": "失效中",
                "isassaginment": "2",
                "visitflag": "0",
                "facerecordflag": "0"
              }
            ],
            "total": "10",
            "size": "10",
            "current": "1",
            "orders": [],
            "searchCount": true,
            "pages": "1"
          }
          if (res.code == 200 && res.data != null) {
            this.queryLoading = false;
            this.historyObj = null;
            if (res.data.records && res.data.total > 0) {
              this.total = res.data.total;
              this.chargeData = res.data.records;
              this.chargeData.forEach(element => {
                if (element.paytodate) {
                  element.paytodate = element.paytodate.substr(0, 10);
                }
                if (
                  element.payyear &&
                  element.payyears &&
                  element.payintvname
                ) {
                  element.payCount =
                    element.payyear +
                    "/" +
                    element.payyears +
                    element.payintvname;
                }
                if (element.appointeddate) {
                  element.appointeddate = element.appointeddate.substr(0, 10);
                }
                if (element.invaliddate) {
                  element.invaliddate = element.invaliddate.substr(0, 10);
                }
                if (element.fishdate) {
                  element.fishdate = element.fishdate.substr(0, 10);
                }
                if (element.reagentcode && element.reagentname) {
                  element.reagent =
                    element.reagentname + "-" + element.reagentcode;
                }
              });
              if (index != 999) {
                this.$Message.info(res.msg);
              }
            } else {
              this.total = 0;
              this.chargeData = [];
              this.$Message.info("查询数据为空");
            }
          } else {
            this.queryLoading = false;
            this.total = 0;
            this.chargeData = [];
            this.$Message.info(res.msg);
          }
          // });
        } else {
          this.$Message.error("信息填写有误");
        }
      });
    },

    // 分页查询
    pageSubmit() {
      this.pageObj.index = this.pageIndex;
      this.pageObj.pageSize = this.pageSize;
      this.api.selectWorkStatisticsInvalid(this.pageObj).then(res => {
        if (res.code == 200 && res.data != null) {
          this.queryLoading = false;
          if (res.data.records && res.data.total > 0) {
            this.total = res.data.total;
            this.chargeData = res.data.records;
            this.chargeData.forEach(element => {
              if (element.paytodate) {
                element.paytodate = element.paytodate.substr(0, 10);
              }
              if (element.payyear && element.payyears && element.payintvname) {
                element.payCount =
                  element.payyear +
                  "/" +
                  element.payyears +
                  element.payintvname;
              }
              if (element.appointeddate) {
                element.appointeddate = element.appointeddate.substr(0, 10);
              }
              if (element.invaliddate) {
                element.invaliddate = element.invaliddate.substr(0, 10);
              }
              if (element.fishdate) {
                element.fishdate = element.fishdate.substr(0, 10);
              }
              if (element.reagentcode && element.reagentname) {
                element.reagent =
                  element.reagentname + "-" + element.reagentcode;
              }
            });
          } else {
            this.total = 0;
            this.chargeData = [];
            this.$Message.info("查询数据为空");
          }
        } else {
          this.queryLoading = false;
          this.total = 0;
          this.chargeData = [];
          this.$Message.info(res.msg);
        }
      });
    },

    // 转化为两位小数
    decimalConversion(value) {
      let reg = /^[0-9][0-9]*$/;
      let reg1 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{1})$/;
      let reg2 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{2})$/;
      if (value) {
        if (reg.test(value)) {
          this.superviseForm.minFee = value + ".00";
        } else if (reg1.test(value)) {
          this.superviseForm.minFee = value + "0";
        } else if (reg2.test(value)) {
        } else {
          this.$refs.superviseForm.validateField("minFee");
        }
      } else {
        this.superviseForm.minFee = null;
      }
    },

    decimalConversion2(value) {
      let reg = /^[0-9][0-9]*$/;
      let reg1 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{1})$/;
      let reg2 = /^(([0-9]{1}\d*)|(0{1}))(\.\d{2})$/;
      if (value) {
        if (reg.test(value)) {
          this.superviseForm.maxFee = value + ".00";
        } else if (reg1.test(value)) {
          this.superviseForm.maxFee = value + "0";
        } else if (reg2.test(value)) {
        } else {
          this.$refs.superviseForm.validateField("maxFee");
        }
      } else {
        this.superviseForm.maxFee = null;
      }
    },
    draw(ele, loginUser, loginTime) {
      let imageUrl = drawSign(ele, loginUser, loginTime)
      document.getElementsByClassName("ivu-table-fixed-body")[2].style.background = 'url(' + imageUrl + ') left top repeat'
      document.getElementsByClassName("ivu-table-fixed-body")[2].classList.add("add-background")

      document.getElementsByClassName("ivu-table-fixed-body")[3].style.background = 'url(' + imageUrl + ') left top repeat'
      document.getElementsByClassName("ivu-table-fixed-body")[3].classList.add("add-background")

      document.getElementsByClassName("ivu-table-body")[1].style.background = 'url(' + imageUrl + ') left top repeat'
      document.getElementsByClassName("ivu-table-body")[1].classList.add("add-background")
    },
    getOrganization() {
      this.api.remanagecomList().then(res => {
        if (res.code == 200 && res.data != null) {
          let arr = []
          arr.push(res.data)
          arr.forEach(one => {
            one.value = one.comcode
            one.label = one.comcode + '-' + one.name
            one.children = one.chilDren || []
            if (one.children) {
              one.chilDren.forEach(two => {
                two.value = two.comcode
                two.label = two.comcode + '-' + two.name
                two.children = two.chilDren || []
                if (two.children) {
                  two.children.forEach(three => {
                    three.value = three.comcode
                    three.label = three.comcode + '-' + three.name
                    three.children = three.chilDren || []
                    if (three.children) {
                      three.children.forEach(four => {
                        four.value = four.comcode
                        four.label = four.comcode + '-' + four.name
                        four.children = four.chilDren || []
                      })
                    }
                  })
                }
              })
            }
          })
          console.log(arr);
          this.reagentOrganizationList = arr
        } else {
          this.reagentOrganizationList = [];
        }
      });
    }
  },
  created() {
    if (sessionStorage.getItem("INSURANCE_TYPE2") == "已失效") {
      if (sessionStorage.getItem("QUERYOBJ")) {
        // 二次筛选条件
        this.historyObj = JSON.parse(sessionStorage.getItem("QUERYOBJ"));
        this.flagIndex = this.historyObj.selecttag;
        this.premorder = this.historyObj.premorder;
        this.paytodateorder = this.historyObj.paytodateorder;
        let arr = ["default", "default", "default", "default"];
        arr[this.flagIndex] = "primary";
        this.but = arr;
        this.pageIndex = this.historyObj.index;
        this.pageSize = this.historyObj.pageSize;

        // 单次查询条件
        this.superviseForm = JSON.parse(sessionStorage.getItem("QUERYFORM"));

        // 工作录入时间段
        this.superviseForm.shouldPayRange[0] = this.historyObj.rangeminControllerDate;
        this.superviseForm.shouldPayRange[1] = this.historyObj.rangemaxControllerDate;
        // 工作计划时间段
        this.superviseForm.workPlanRange[0] = this.historyObj.rangeminappointeddate;
        this.superviseForm.workPlanRange[1] = this.historyObj.rangemaxappointeddate;
        // 工作完成时间段
        this.superviseForm.workEndRange[0] = this.historyObj.rangeminfishdate;
        this.superviseForm.workEndRange[1] = this.historyObj.rangemaxfishdate;
        // 应交日时间段
        this.superviseForm.PayableRange[0] = this.historyObj.rangeminpaytodate;
        this.superviseForm.PayableRange[1] = this.historyObj.rangemaxpaytodate;
        // 失效日段
        this.superviseForm.disableRange[0] = this.historyObj.rangmininvaliddate;
        this.superviseForm.disableRange[1] = this.historyObj.rangmaxinvaliddate;

        this.organizationChange(this.superviseForm.reagentOrganization);
        // console.log(this.historyObj, this.superviseForm);
        // console.log('工作录入时间段:' + this.superviseForm.shouldPayRange);
        // console.log('工作计划时间段:' + this.superviseForm.workPlanRange);
        // console.log('工作完成时间段:' + this.superviseForm.workEndRange);
        // console.log('应交日时间段:' + this.superviseForm.PayableRange);
        // console.log('失效日段:' + this.superviseForm.disableRange);

        // this.handleSubmit(999);

        sessionStorage.removeItem("QUERYOBJ");
        sessionStorage.removeItem("QUERYFORM");
        // sessionStorage.removeItem("INSURANCE_TYPE");
      }
    }
  },
  mounted() {
    this.getOrganization()
    this.superviseForm.saleChannel && this.changeSaleChannel(this.superviseForm.saleChannel)
    this.initial();
    this.handleSubmit(999);
    let loginUser = sessionStorage.getItem("name");
    let loginTime =
      new Date().getFullYear() +
      "/" +
      (new Date().getMonth() + 1) +
      "/" +
      (new Date().getDate());
    this.draw(this.$refs.myCanvas, loginUser, loginTime)
  },
  beforeDestroy() {
    this.chargeData = null
  }
};
</script>
<style lang="less">
@import "./index";

.ivu-modal-header {
  background-color: #2d8cf0;
}

.ivu-modal-close .ivu-icon-ios-close {
  color: #fff;
}
</style>
